<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全选/反选</title>
	</head>

	<body>
		<input type="checkbox" id="all" />全选
		<hr />
		<input type="checkbox" class="box" />电脑
		<br />
		<input type="checkbox" class="box" />手机
		<br />
		<input type="checkbox" class="box" />ipad
		<script>
			var all = document.getElementById("all");
			var box = document.getElementsByClassName("box")

			//all.onclick=function () {
			//for (var i = 0; i < box.length; i++) {
			//第一种
			/*box[i].checked=all.checked*/
			//第二种
			//	box[i].checked=event.target.checked;
			//}
			//};
			  
			//事件监听方式
			all.addEventListener('click', myfun, false)

			function myfun() {
				for(var i = 0; i < box.length; i++) {
					box[i].checked = event.target.checked;
				}
			}
		</script>
	</body>

</html>